<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./media/favicon.png" type="image/png">
    <script src="./js/vue.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/config.js"></script>
    <script src="./js/axios@1.5.0_dist_axios.min.js"></script>
    <link rel="stylesheet" href="./style/main.css">
    <link rel="stylesheet" href="./style/goods.css">
    <title>物资统计</title>
    <style>
        @media (min-width: 1920px) {
            html {
                font-size: 20%;
            }
        }

        @media (min-width: 2040px) {
            html {
                font-size: 32%;
            }
        }

        @media (min-width: 3840px) {
            html {
                font-size: 62.5%;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="goods">
            <div class="container">
                <div id="forewarning" class="flex">
                    <img src="./media/img/warning-icon.png">
                    <div class="content_msg_box flex">
                        <div class="flex scroll" v-for="i in 3" ::key="i"
                            :style="{animationDuration:listMsg.length*12 +'s'}">
                            <div class="msg_list_item flex" v-for="(item, index) in listMsg" :key="item.MsgUuid">
                                <div class="time">
                                    {{ item.AddTime}}
                                </div>
                                <div class="msg">
                                    {{item.MsgText}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container_item" id="left">
                    <div class="goods_number">
                        <title-bg title="物资品类数量"></title-bg>
                        <div class="content">
                            <div class="item top_left">
                                <div class="item_title">药品</div>
                                <div class="num">
                                    {{ listGoodType.restoratives }}
                                    <span>种</span>
                                </div>
                            </div>
                            <div class="item top_right">
                                <div class="item_title">血液</div>
                                <div class="num">
                                    {{listGoodType.blood }}
                                    <span>种</span>
                                </div>
                            </div>
                            <div class="item bottom_left">
                                <div class="item_title">耗材</div>
                                <div class="num">
                                    {{listGoodType.consumable }}
                                    <span>种</span>
                                </div>
                            </div>
                            <div class="item bottom_right">
                                <div class="item_title">其他</div>
                                <div class="num">
                                    {{listGoodType.other }}
                                    <span>种</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="goods_consumption_ranking">
                        <title-bg title="物资消耗排行"></title-bg>
                        <div class="content">
                            <div class="list_container left_list">
                                <div class="list_title">
                                    <div class="center">
                                        #
                                    </div>
                                    <div class="name">物资名称</div>
                                    <div class="consumption center">
                                        消耗数量
                                    </div>
                                    <div class="Inventory center">库存数量</div>
                                </div>
                                <div class="scroll_box">
                                    <div :style="{animationDuration:listUsedGoods.length*2 +'s'}"
                                        :class="[ listUsedGoods.length >10?'scorllY' :'']" class="list_content"
                                        v-for="i in UsedGoods" :key="i">
                                        <div class="list_item" v-for="(item, index) in listUsedGoods"
                                            :key="item.GoodsCode">
                                            <div class="tag flex center">
                                                <span>{{ index + 1 }}</span>
                                            </div>
                                            <div class="name text_overflow">
                                                {{item.GoodsName}}
                                            </div>
                                            <div class="consumption center">
                                                {{ item.UsedNo + item.GoodsUnit }}
                                            </div>
                                            <div class="allNum center">
                                                {{ item.GoodsNo }}
                                                {{item.GoodsUnit}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container_item" id="center">
                    <title-bg title="关键物资数量"></title-bg>
                    <div class="content">
                        <div class="list_container center_list">
                            <div class="list_title">
                                <div class="name">物资名称</div>
                                <div class=" center">
                                    物资数量
                                </div>
                                <div class="center">物资单位</div>
                            </div>
                            <div class="scroll_box">
                                <div :class="[ listGoodNo.length >14?'scorllY' :'']"
                                    :style="{animationDuration:listGoodNo.length*2 +'s'}" class="list_content"
                                    v-for="i in keyGoodsNo" :key="i">
                                    <div class="list_item" v-for="(item, index) in listGoodNo" :key="item.GoodsCode">
                                        <div class="name text_overflow">
                                            {{item.GoodsName}}
                                        </div>
                                        <div class="center">
                                            {{ item.GoodsNo }}
                                        </div>
                                        <div class="center">
                                            {{item.GoodsUnit}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container_item" id="right">
                    <title-bg title="物资库存"></title-bg>
                    <div class="content">
                        <div class="list_container right_list">
                            <div class="list_title">
                                <div class="name">物资名称</div>
                                <div class=" center">
                                    物资数量
                                </div>
                                <div class="center">物资单位</div>
                            </div>
                            <div class="scroll_box">
                                <div :class="[ listAllGoodNo.length >14?'scorllY' :'']"
                                    :style="{animationDuration:listAllGoodNo.length*2 +'s'}" class="list_content"
                                    v-for="i in AllGoods" :key="i">
                                    <div class="list_item" v-for="(item, index) in listAllGoodNo" :key="item.GoodsCode">
                                        <div class="name text_overflow">
                                            {{item.GoodsName}}
                                        </div>
                                        <div class="center">
                                            {{ item.GoodsNo }}
                                        </div>
                                        <div class="center">
                                            {{item.GoodsUnit}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/component.js"></script>
    <script src="./js/http.js"></script>
    <script src="./js/api.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                listGoodNo: [],//重点物资库存数量
                listMsg: [],//预警信息
                listGoodType: {},//物资品类数量
                listAllGoodNo: [],//所有物资库存数量
                listUsedGoods: [],//已用物资消耗排行
            },
            async mounted() {
                await this.getGoodsData();
                setInterval(async () => {
                    await this.getGoodsData();
                }, 60 * 1000)
            },
            computed: {
                keyGoodsNo() {
                    return this.listGoodNo.length > 14 ? 3 : 1;
                },
                AllGoods() {
                    return this.listAllGoodNo.length > 14 ? 3 : 1;
                },
                UsedGoods() {
                    return this.listUsedGoods.length > 10 ? 3 : 1;
                },
            },
            methods: {
                async getGoodsData() {
                    await getGoodsData({}).then(res => {
                        let data = res.data;
                        console.log(res, data);
                        if (res.code == 0) {
                            this.listGoodNo = data.listGoodNo;
                            this.listMsg = data.listMsg;
                            data.listGoodType.forEach(item => {
                                switch (item.GoodsTypeName) {
                                    case "药品":
                                        this.listGoodType.restoratives = item.GoodsTypeNo;
                                        break;
                                    case "耗材":
                                        this.listGoodType.consumable = item.GoodsTypeNo;
                                        break;
                                    case "血液":
                                        this.listGoodType.blood = item.GoodsTypeNo;
                                        break;
                                    case "其他":
                                        this.listGoodType.other = item.GoodsTypeNo;
                                        break;
                                    default:
                                        break;
                                }
                            });
                            this.listAllGoodNo = data.listAllGoodNo;
                            this.listUsedGoods = data.listUsedGoods;
                        } else {
                            alert(res.msg);
                        }
                    })
                }
            },
        })
    </script>
</body>

</html>